$(function() {
    // 图表
    $.get('http://175.178.158.178:8956/show', function(alldata) {
        console.log(alldata.data);

        // 果园名字
        var allname = [];
        // 筛选所有果园
        $.each(alldata.data, function(i, ele) {
            // console.log(i); // 索引
            // console.log(ele); // 每一个元素

            // console.log(alldata.data[i].orchardName)
            if ($.inArray(alldata.data[i].orchardName, allname) == -1) {　　　　
                allname.push(alldata.data[i].orchardName);　　
            }
        })

        // console.log(allname);
        $("#select").children().remove();
        $.each(allname, function(i, ele) {
            // console.log(i); // 索引
            // console.log(ele); // 每一个元素

            // 动态添加果园
            var option = $(`
                            <option value="${ele}">${ele}</option>
                        `)
            $("#select").append(option);
        })

        // 异常、正常设备
        // 1. 实例化对象
        var myChart1 = echarts.init(document.querySelector(".chart_1"));
        // 2. 指定配置项和数据
        option1 = {
            tooltip: {
                trigger: 'item',
            },
            series: [{
                name: '总数',
                type: 'pie',
                radius: ['20%', '70%'],
                itemStyle: {
                    borderRadius: "50",
                    borderColor: '#fff',
                    borderWidth: 3
                },
                // 修饰饼形图文字相关的样式 label对象
                label: {
                    fontSize: 15
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 16,
                    // 连接到文字的线长度
                    length2: 10
                },
                data: [
                    { value: 1190, name: '设备总数' },
                    { value: 190, name: '季度新增' },
                    { value: 464, name: '运营设备' },
                    { value: 536, name: '异常设备' },
                ],
                // 注意颜色写的位置
                color: [
                    "#ec4f00",
                    "#6acca3",
                    "#fecb0b",
                    "#1fb2f8"
                ],
            }]
        };
        // 3. 配置项和数据给我们的实例化对象
        myChart1.setOption(option1);

        // 4. 当我们浏览器缩放的时候，图表也等比例缩放
        window.addEventListener("resize", function() {
            // 让我们的图表调用 resize这个方法
            myChart1.resize();
        });



        // 虫类总数与类别柱形图
        // 1. 实例化对象
        var myChart2 = echarts.init(document.querySelector(".chart_2"));
        // 2. 指定配置项和数据

        option2 = {
            tooltip: {
                trigger: "item",
            },
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [18.9, alldata.data[0].pestNumber, alldata.data[0].pestName],
                    [28.8, alldata.data[1].pestNumber, alldata.data[1].pestName],
                    [40.9, alldata.data[2].pestNumber, alldata.data[2].pestName],
                    [58.2, alldata.data[3].pestNumber, alldata.data[3].pestName],
                    [64.4, alldata.data[4].pestNumber, alldata.data[4].pestName],
                    [75.7, alldata.data[5].pestNumber, alldata.data[5].pestName],
                    [80.4, alldata.data[6].pestNumber, alldata.data[6].pestName],
                    [89.2, alldata.data[7].pestNumber, alldata.data[7].pestName],
                    [99.1, alldata.data[8].pestNumber, alldata.data[8].pestName],
                ]
            },
            grid: {
                left: "10%",
                right: "14%",
                bottom: "20%",
                top: "10%",
                //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
                containLabel: true,
            },
            xAxis: { name: '只' },
            yAxis: { type: 'category' },
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                bottom: '20px',
                min: 0,
                max: 100,
                text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                }
            },
            series: [{
                type: 'bar',
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'amount',
                    // Map the "product" column to Y axis
                    y: 'product'
                }
            }]
        };

        // 3. 配置项和数据给我们的实例化对象
        myChart2.setOption(option2);

        // 4. 当我们浏览器缩放的时候，图表也等比例缩放
        window.addEventListener("resize", function() {
            // 让我们的图表调用 resize这个方法
            myChart2.resize();
        });


        // 序列准确率折线图
        // 1. 实例化对象
        var myChart3 = echarts.init(document.querySelector(".chart_3"));
        // 2. 指定配置项和数据
        option3 = {
            title: {
                show: true,
                text: '序\n列\n准\n确\n率\n平\n均\n值\n折\n线\n图',
                textStyle: {
                    fontSize: 15,
                },
                left: '20px',
                top: 'center',
            },
            tooltip: {
                // 通过坐标轴来触发
                trigger: "axis",
                // backgroundColor: "#fff",
                axisPointer: {
                    label: {
                        shadowBlur: 10,
                        shadowColor: "rgba(0, 0, 0, .2)",
                        color: "#000",
                        crossStyle: {
                            color: '#000'
                        }
                    }
                }
            },
            grid: {
                left: "10%",
                right: "10%",
                bottom: "5%",
                top: "10%",
                //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['椿象', '蛀蒂虫', '卷叶蛾', '毛毡病', '尺蠖', '金龟子', '荔枝瘿螨', '小灰蝶', '龟背天牛']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    interval: 'auto',
                    formatter: '{value} %'
                },
                show: true,
                nameTextStyle: {
                    fontSize: 40
                },
                offset: 5,
                max: 100
            },
            color: "#5c7bd9",
            series: [{
                data: [64, 83, 72, 51, 63, 94, 74, 66, 83],
                type: 'line'
            }]
        };
        // 3. 配置项和数据给我们的实例化对象
        myChart3.setOption(option3);

        // 4. 当我们浏览器缩放的时候，图表也等比例缩放
        window.addEventListener("resize", function() {
            // 让我们的图表调用 resize这个方法
            myChart3.resize();
        });
        // })

    }, 'json')

    // 时间函数
    var t = null;
    t = setTimeout(time, 1000); //開始运行
    function time() {
        clearTimeout(t); //清除定时器
        var dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        $(".show_time_y").html(y);
        $(".show_time_m").html(mt);
        $(".show_time").val(day);
        t = setTimeout(time, 10000000); //设定定时器，循环运行
    }

    // tab 转换
    $(function() {
        // 1. 鼠标经过左侧的小li
        $("#left li").click(function() {
            // 2. 得到当前的小li 的索引号
            var index = $(this).index();
            console.log(index);

            // 3. 让我们右侧的盒子相应索引号的图片显示出来
            $("#png div").eq(index).stop().fadeIn(500);

            // 4. 让其他的图片（就是其他的兄弟）隐藏起来
            $("#png div").eq(index).siblings().stop().fadeOut(500);
        });

        $(".marquee-view .marquee").each(function() {
            // console.log($(this));
            var rows = $(this)
                .children()
                .clone();
            $(this).append(rows);
        });

    })

    var date = new Date();
    var h = date.getHours();

    $.getJSON('http://wis.qq.com/weather/common?callback=?', {
        source: 'pc',
        weather_type: 'forecast_1h|forecast_24h',
        province: '广东省',
        city: '茂名市'
    }, function(data) {
        console.log(data.data);
        $(".show_degree").html(`${data.data.forecast_1h[0].degree}°`);
        $(".show_weather_short").html(data.data.forecast_1h[0].weather);
        $(".show_wind_direction").html(data.data.forecast_1h[0].wind_direction);
        $(".show_wind_power").html(`${data.data.forecast_1h[0].wind_power}级`);

        if (h < 12) {
            if (h > 6) {
                weather();
            }
            $('.greetings').html('(。＿ 。）上午好, 又是美好的一天');
        } else if (h < 18) {
            weather();
            $('.greetings').html('(。＿ 。）下午好, 吃饭了吗');
        } else {
            $('.greetings').html('(。＿ 。）晚上好, 又要结束疲惫的一天了');
            $(".tip").html('● 夜晚了，但是快落的夜生活才刚刚开始咯，快来玩吧 ~ ');

        }

        function weather() {
            if (data.data.forecast_1h[0].weather === '多云') {
                $(".starry").removeClass("starry").addClass("cloudy");
                $(".tip").html('● 山顶上的云更奇了,云儿聚拢在一起 ~ ');

            } else if (data.data.forecast_1h[0].weather === '晴') {
                $(".starry").removeClass("starry").addClass("sunny");
                $(".tip").html('● 光芒透过云缝，洒向大地，注意防晒 ~');

            } else if (data.data.forecast_1h[0].weather === '阴' || data.data.forecast_1h[0].weather === '雾') {
                $(".starry").removeClass("starry").addClass("overcast");
                $(".tip").html('● 现在的温度，好舒适啊，快快出门玩耍吧 ~ ');

            } else if (data.data.forecast_1h[0].weather === '小雨' || data.data.forecast_1h[0].weather === '阵雨') {
                $(".starry").removeClass("starry").addClass("rainy");
                $(".tip").html('● 下雨了，记得出门的时候，带上雨伞wo ~ ');
            }
        }
    });
})